<script setup lang="ts">
import Edit from './dialog/edit/index.vue';
import { searchConfig } from './config/search-config';
import { tableConfig } from './config/table-config';
import { doGetProcedureList, doDelProcedure } from '@/api/procedure/index';
import addDataStore from '@/store/modules/addDataStore';
import paramsStore from '@/store/modules/paramsStore';
import { Plus, Delete } from '@element-plus/icons-vue';
import type { Auxiliary } from './type';
import type {
    WorkingProcedure,
    WorkingProcedureAuxiliary,
    WorkingProcedureEquipments
} from '@/api/procedure/model/type';

defineOptions({
    name: 'procedureList'
});

const { handleAddData } = addDataStore();

const router = useRouter();

const tableRef = ref<TableRef>();

/**
 * @: 删除相关
 * @param {*} ref
 * @return {*}
 */
const selectIds = ref<string[]>([]);
const workingProcedureList = ref<WorkingProcedure[]>([]);
const handleSelection = (list: WorkingProcedure[]) => {
    workingProcedureList.value = list;
    selectIds.value = list.map(item => item.id);
};

const searchRef = ref<SearchRef>();

// 删除相关
const { handleDel, rowDel } = useDelRow(tableRef, selectIds, doDelProcedure);

/**
 * @: 编辑相关
 */
type EditRef = InstanceType<typeof Edit>;
const editRef = ref<EditRef>();
const handleEdit = (row: WorkingProcedure) => {
    editRef.value?.open(row.id);
};

/**
 * @: 表格新增
 */
const handleAdd = () => {
    handleAddData('procedureAddData');
    tableRef.value?.clearSelection();
    router.push('/process/procedureList/add');
};

/**
 * 获取当前工序设备对应设备下的辅助资源列表集合
 */
const getAuxiliaryName = (auxilaryData: Auxiliary[]) => {
    const auxilaryText = auxilaryData.reduce((str, item) => {
        if (str) str += '、';
        str += `${item.auxiliaryResourceName} | ${item.auxiliaryDataCoding}`;
        return str;
    }, '');
    return auxilaryText || '--';
};

/**
 * @: 处理辅助资源列表
 */
const { setAuxiliary } = paramsStore();
const mapCollection = (equipments: WorkingProcedureAuxiliary[]) => {
    return equipments?.map(item => item.auxiliaryDataCoding).join(',');
};

/**
 * @: 跳转到辅助资源
 */
const jumpAuxiliary = (row: WorkingProcedureEquipments) => {
    const auxiliaryData = mapCollection(row.workingProcedureAuxiliary);
    if (auxiliaryData) {
        setAuxiliary(auxiliaryData);
        router.push('/auxiliaryResources');
    }
};
</script>

<template>
    <q-page class="process-page">
        <base-search ref="searchRef" :table-ref="tableRef" :searchConfig="searchConfig" />

        <base-table
            ref="tableRef"
            :tableConfig="tableConfig"
            :getDataFn="doGetProcedureList"
            :lineEdit="false"
            @selection-change="handleSelection"
            @del="rowDel"
            @edit="handleEdit"
        >
            <template #tableHeadStart>
                <el-button type="primary" :icon="Plus" @click="handleAdd"> 新增 </el-button>
            </template>
            <template #tableHeadEnd>
                <el-button
                    class="m-r-16"
                    :disabled="selectIds.length === 0"
                    :icon="Delete"
                    @click="handleDel(`选中${selectIds.length}行数据，删除后无法恢复，确认删除？`)"
                >
                    删除
                </el-button>
            </template>
            <template #processEquipment="{ row }">
                <el-popover placement="right" :width="500">
                    <template #reference>
                        <el-text type="primary" style="cursor: pointer">{{
                            row.workingProcedureEquipmentCount
                        }}</el-text>
                    </template>
                    <el-table :data="row.workingProcedureEquipments" max-height="300">
                        <el-table-column label="设备编码">
                            <template #default="{ row }">
                                <el-text
                                    type="primary"
                                    style="cursor: pointer"
                                    @click="$router.push(`/equipment?code=${row.equipmentNumber}`)"
                                    >{{ row.equipmentNumber }}</el-text
                                >
                            </template>
                        </el-table-column>
                        <el-table-column label="设备名称">
                            <template #default="{ row }">
                                {{ row.deviceName || '--' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="辅助资源">
                            <template #default="{ row }">
                                <el-text
                                    type="primary"
                                    style="cursor: pointer"
                                    @click="jumpAuxiliary(row)"
                                    >{{ getAuxiliaryName(row.workingProcedureAuxiliary) }}</el-text
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </el-popover>
            </template>
        </base-table>

        <!-- 编辑 -->
        <Edit ref="editRef" @updateSuccess="tableRef?.getData()" />
    </q-page>
</template>

<style scoped lang="scss">
@include b(process-page) {
    padding-top: 0;
}

@include b(link) {
    color: var(--q-color-primary);
    cursor: pointer;
}

@include b(edit-link) {
    width: 500px;
    height: 32px;
    line-height: 32px;
    color: var(--q-color-primary);
    cursor: pointer;

    @include utils-ellipsis(1);
}
</style>
